<template>
  <view class="wrap">
    <view class="header" :style="{backgroundImage: `url(${indexBackgroundImage})`}">
      <status-bar></status-bar>
      <view class="back" @click="back">
        <view class="call">
          <uv-icon name="arrow-left" size='40rpx' color="#FFF" bold></uv-icon>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="base">
        <view class="title">申请条件</view>
        <view class="desc">完成以下条件可发起申请,审核通过后成为正式社群</view>
        <view class="list">
          <view class="item">
            <view class="left">社群成员超过20人</view>
            <button class="btn" :class="{finish: base.total_people < 20}" hover-class="none">{{ base.total_people < 20 ? '未完成' : '已完成' }}</button>
          </view>
          <view class="item">
            <view class="left">完成实名认证</view>
            <button class="btn" :class="{finish: base.is_real_auth != 1}" hover-class="none">{{ base.is_real_auth == 1 ? '已完成' : '未完成' }}</button>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <template v-if="body.examine_status == 0 || body.examine_status == 3">
        <template v-if="base.total_people >= 20 && base.is_real_auth == 1">
          <button class="btn" hover-class="none" @click="openModal">前往申请</button>
        </template>
        <template v-else>
          <button class="btn" disabled hover-class="none">前往申请</button>
        </template>
      </template>
      <template v-else>
        <button class="btn" hover-class="none" disabled>审核中</button>
      </template>
      <view class="reason" v-if="base.association && base.association.reason">拒绝原因：{{ base.association.reason }}</view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    
    <uv-popup ref="popup" mode='bottom' bgColor='#FFFFFF' round='40rpx' closeable safeAreaInsetBottom closeOnClickOverlay>
      <view class="ws">
        <view class="bigs">申请成为正式社群</view>
        <view class="testArea">
          <uv-textarea v-model="apply_reason" placeholder="请输入内容" border='none' height='260rpx' placeholderStyle='font-weight: 400; font-size: 28rpx; color: #B8B8B8;' :textStyle="{color: '#000', fontSize: '28rpx'}" :customStyle="{backgroundColor: '#F5F5F5'}"></uv-textarea>
        </view>
        <view class="safPopup">
          <button class="btn" hover-class="none" @click="confirm">提交</button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import indexBackgroundImage from "@/static/formal.png"
import { ref, computed } from 'vue';
import { getGroup, toast } from '@/common';
import { useOrder } from '@/store';
import { post } from '@/api';
import { onLoad } from '@dcloudio/uni-app';

const popup = ref(null)

let base = ref({});
let apply_reason = ref('');

const body = computed(() => {
  const store = useOrder();
  return uni.$uv.deepClone(store.group);
});

onLoad(() => {
  getData();
})

function getData(){
  post('api/association/isCompleteByApply', { association_id: body.value.id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      base.value = data;
      console.log(base.value);
    }
  })
}
function confirm(){
  if(!apply_reason.value) return toast('请输入申请原因');
  popup.value.close();
  const params = {
    association_id: body.value.id,
    apply_reason: apply_reason.value
  }
  console.log(body.value.id);
  post('api/association/applyFormalAssociation', params).then(res => {
    if(res.code == 1){
      toast('提交成功', true);
      console.log(body.value.id);
      getGroup(body.value.id);
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000)
    }
  })
}
function openModal(){
  popup.value.open();
}
function back(){
  uni.navigateBack({
    delta: 1
  });
}
</script>

<style lang="scss" scoped>
  .ws{
    padding: 0 30rpx;
    .safPopup{
      padding-top: 50rpx;
      padding-bottom: 30rpx;
      .btn{
        font-size: 34rpx;
      }
    }
    .testArea{
      width: 100%;
      height: calc(260rpx + 18px);
    }
    .bigs{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      text-align: center;
      padding-top: 40rpx;
      padding-bottom: 30rpx;
    }
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .reason{
      font-size: 28rpx;
      color: #2B2B2B;
      text-align: center;
      padding: 30rpx 0;
    }
    .btn{
      font-size: 34rpx;
    }
  }
  .box{
    padding: 0 30rpx;
    margin-top: -120rpx;
    position: relative;
    z-index: 2;
    .base{
      width: 100%;
      background-color: #fff;
      border-radius: 24rpx;
      padding: 0 30rpx;
      .list{
        padding-top: 40rpx;
        .item{
          width: 100%;
          padding-bottom: 60rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:last-child{
            padding-bottom: 40rpx;
          }
          .left{
            font-weight: 400;
            font-size: 28rpx;
            color: #2B2B2B;
          }
          .btn{
            width: 140rpx;
            height: 64rpx;
            line-height: 64rpx;
            border-radius: 64rpx;
            &.finish{
              background: #B8B8B8;
            }
          }
        }
      }
      .desc{
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        padding-top: 8rpx;
        padding-bottom: 40rpx;
        border-bottom: 1px solid #EFEFEF;
      }
      .title{
        font-weight: 500;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-top: 40rpx;
      }
    }
  }
  .back{
    padding-top: 25rpx;
    padding-left: 32rpx;
    .call{
      display: inline-block;
    }
  }
  .header{
    width: 100%;
    height: 674rpx;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .wrap{
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>